<template>
  <div class="background">
    <img :src="imgSrc" width="100%" height="100%" alt="" />
  <div class="main" style= "background-color:white">
    <div class="demo-type">
      <div>
        <el-avatar shape="square" :size="50" icon="el-icon-user-solid"></el-avatar>
      </div>
      <br>
      <br>

      <el-tabs type="border-card" >
        <el-tab-pane label="手机注册"  >
          <el-input
            id="phone"
            placeholder="请输入手机号"
            v-model="inputphone"
            clearable>
          </el-input>
          <br>
          <br>
          <el-input
            id="VC1"
            placeholder="请输入验证码"
            v-model="Code1"
            clearable>
          </el-input>
          <input id="getVC" type="button" value="获取验证码" @click="SetCode1">
          <br>
          <br>

          <el-input id="password"
                    placeholder="请输入密码"
                    v-model="inputpassword1"
                    show-password>
          </el-input>

          <br>
          <br>

          <el-input id="password2"
                    placeholder="请确认密码"
                    v-model="inputpassword11"
                    show-password>
          </el-input>
          <br>
          <br>
          <el-button type="info" round @click="DoRegister1(),jump1()">点击注册</el-button>

        </el-tab-pane>

        <el-tab-pane label="邮箱注册">
          <el-input
            id="phone"
            placeholder="请输入邮箱"
            v-model="inputemail"
            clearable>
          </el-input>

          <br>
          <br>
          <el-input
            id="phone"
            placeholder="请输入验证码"
            v-model="Code2"
            clearable>
          </el-input>
          <input id="getVC2" type="button" value="获取验证码" @click="SetCode2">

          <br>
          <br>

          <el-input id="password"
                    placeholder="请输入密码"
                    v-model="inputpassword2"
                    show-password>
          </el-input>

          <br>
          <br>

          <el-input id="password2"
                    placeholder="请确认密码"
                    v-model="inputpassword22"
                    show-password>
          </el-input>

          <br>
          <br>
          <el-button type="info" round @click="DoRegister2(),jump2()">点击注册</el-button>

        </el-tab-pane>

      </el-tabs>

      <br>



    </div>
  </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "login",

  data() {
    return {
      inputemail: '',
      inputphone:'',
      inputpassword1:'',
      inputpassword11:'',
      inputpassword2:'',
      inputpassword22:'',
      Code1:'',
      Code2:'',
      Status:2,
      imgSrc:require('../../static/image/login.jpg')
    }


  },

  methods:{
    register:function (){
      this.$router.push({ path:'/register'})
    },
    retrieve:function (){
      this.$router.push({ path:'/retrieve'})
    },

    jump1:function (){
      if(this.Status==1&&this.inputpassword1==this.inputpassword11){
        this.$router.push({ path:'/Try'})
        }
    },

    jump2:function (){
      if(this.Status==1&&this.inputpassword2==this.inputpassword22){
        this.$router.push({ path:'/Try'})
      }
    },


    SetCode1:function (inputphone){
      var that = this;
      axios.post('api')
        .then(function (response){
          that.$message({
            showClose:true,
            message:'验证码发送成功',
            type:'success'
          })
        })
        .catch(function (err){
          that.$message({
            showClose:true,
            message:'验证码发送失败',
            type:'error'
          })
        })
    },


    SetCode2:function (inputemail){
      var that = this;
      axios.post('api')
        .then(function (response){
          that.Status=response.data
          that.$message({
            showClose:true,
            message:'验证码发送成功',
            type:'success'
          })
        })
        .catch(function (err){
          that.$message({
            showClose:true,
            message:'验证码发送失败',
            type:'error'
          })
        })

    },


    DoRegister1:function (inputphone,inputpassword1,Code1){
      var that = this;
      axios.post('api')
        .then(function (response){
          that.Status=response.data
          that.$message({
            showClose:true,
            message:'注册成功',
            type:'success'
          })
        })
        .catch(function (err){
          that.$message({
            showClose:true,
            message:'注册失败',
            type:'error'
          })
        })
    },


    DoRegister2:function (inputemail,inputpassword2,Code2){
      var that = this;
      axios.post('api')
        .then(function (response){
          that.Status=response.data
          that.$message({
            showClose:true,
            message:'注册成功',
            type:'success'
          })
        })
        .catch(function (err){
          that.$message({
            showClose:true,
            message:'注册失败',
            type:'error'
          })
        })
    }
  },

}


</script>

<style scoped>
.main {
  width: 400px;

  border: 25px solid rgba(84, 92, 100, 0.26);
  padding: 25px;
  margin: 25px;
  position: absolute;
  left:50%;margin-left:-250px;top:35%;
  margin-top:-190px;

}

#getVC{
  position: absolute;
  left: 300px;
  height: 40px;
}

#getVC2{
  position: absolute;
  left: 300px;
  height: 40px;
}
.background{
  width:100%;
  height:100%;  /**宽高100%是为了图片铺满屏幕 */
  z-index:-1;
  position: fixed;
}
</style>
